<template>
	<div class="more_image_upload d-flex">
		<ul class="el-upload-list el-upload-list--picture-card" :class="[form=='chang'?'rectangle':'']">
			<li class="el-upload-list__item is-ready" v-for="(item,index) in preview">
			  <div >
				<img class="el-upload-list__item-thumbnail" :src="item" alt="">
				<span class="el-upload-list__item-actions">
					<span class="el-upload-list__item-delete" @click="view(item)">
					<i class="el-icon-view"></i>
				  </span>
				  <span class="el-upload-list__item-delete" @click="remove(index)">
					<i class="el-icon-delete"></i>
				  </span>
				</span>
			  </div>
			</li>
		  </ul>
		  <div class="avatar-uploader" :class="[form=='chang'?'rectangle':'']" v-if="!(preview.length==limit)">

		  	<el-upload :action="uploadURL" :data="uploadData" :headers="header" :show-file-list="false"  :on-exceed="handleExceed"
		  		:on-success="uploadSuccess" :before-upload="beforeUpload" accept="image/*" multiple  :limit="limit">
		  		<i v-show="loading" class="el-icon-loading avatar-uploader-icon"></i>
		  		<i v-show="!loading " class="el-icon-plus avatar-uploader-icon cameraIcon"></i>
		  		<p class="text" >上传图片</p>
		  	</el-upload>
		  </div>
       <el-image ref="preview" :src="statusImg" :preview-src-list="preview" style="display: none;"></el-image>

	</div>

</template>

<script>
	//import sign from '@/utils/apisign.js'
	import common from "@/api/api";
	export default {
		name: "more_image_upload",
		props:['imagePreview','imageLimit','size','imageSize','returnType'],
		watch: {
			imagePreview: function(value) {
        this.preview = value?value:[];
        if(this.preview.length=='1' && (!this.preview[0])){
          this.preview = [];
        }
			},
			imageSize: function(value) {
				this.form = value
			},
			imageLimit: function(value) {
				this.limit = value;
				console.log(value)
			},
		},
		data() {
			return {
				loading: false,
				preview: [],
        previewObj:[],
        statusImg:'',
				source: "",
				ImgSize: '',
				form: '',
				limit:'',
				dialogVisible: false,
				header: {
					AuthorizationMega: ''
				},
				uploadURL: common.apihost + "/system/file/uploadFile", //this.$store.state.imageUploadURL
				uploadData: {
					fileType: 1
				},
			}
		},
		mounted() {
			this.limit = Number(this.imageLimit);
			this.preview = this.imagePreview?this.imagePreview:[];
			this.form = this.imageSize;
			this.header.AuthorizationMega = localStorage.getItem('bossAppToken');
		},
		methods: {
			/*		图片上传前的处理	*/
			handleExceed(files, fileList) {
		     this.$message.warning(`当前限制选择 ${this.limit}个图片，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
		  },
			beforeUpload(file) {
				this.loading = true;
				if(this.size==750){
				  this.loading = false;
				  const is1M = file.size / 1024 / 1024 < 10; // 限制小于20M
				    if (!is1M) {
				        this.$message.error('图片尺寸限制为750 x 750，大小不可超过10MB，比例为1:1');
				        return false;
				    } else {
				        const isSize = new Promise((resolve, reject) => {
				            const width = 750;
				            const height = 750;
				            const _URL = window.URL || window.webkitURL;
				            const img = new Image();
				            img.onload = () => {
				              let valid = false;
				              if(img.width>=width && img.height>=height){
				                if (img.width / img.height == '1') {
				                  valid = true;
				                }
				              }
				              valid ? resolve() : reject();
				            };
				            img.src = _URL.createObjectURL(file);
				        }).then(
				            () => {
				                return file;
				            },
				            () => {
				                this.$message.error('图片尺寸最小为750 x 750，大小不可超过10MB，比例为1:1');
				                return Promise.reject();
				            },
				        );
				        return isSize;
				    }
				}else if(this.size==700){
				  this.loading = false;
				  const is1M = file.size / 1024 / 1024 < 10; // 限制小于10M
				    if (!is1M) {
				        this.$message.error('图片尺寸限制为700 x 230，大小不可超过10MB，比例为3:1');
				        return false;
				    } else {
				        const isSize = new Promise((resolve, reject) => {
				            const width = 700;
				            const height = 230;
				            const _URL = window.URL || window.webkitURL;
				            const img = new Image();
				            console.log(img)
				            img.onload = () => {
				                let valid = false;
				                if(img.width>=width && img.height>=height){
				                  if (img.width / img.height == '3.0434782608695654') {
				                    valid = true;
				                  }
				                }
				                valid ? resolve() : reject();
				            };
				            img.src = _URL.createObjectURL(file);
				        }).then(
				            () => {
				                return file;
				            },
				            () => {
				                this.$message.error('图片尺寸限制为700 x 230，大小不可超过10MB，比例为3:1');
				                return Promise.reject();
				            },
				        );
				        return isSize;
				    }
				}else if(this.size==280){
				  this.loading = false;
				  const is1M = file.size / 1024 / 1024 < 10; // 限制小于10M
				    if (!is1M) {
				        this.$message.error('图片尺寸限制为700 x 280，大小不可超过10MB，比例为5:2');
				        return false;
				    } else {
				        const isSize = new Promise((resolve, reject) => {
				            const width = 700;
				            const height = 280;
				            const _URL = window.URL || window.webkitURL;
				            const img = new Image();
				            console.log(img)
				            img.onload = () => {
				                let valid = false;
				                if(img.width>=width && img.height>=height){
				                  if (img.width / img.height == '2.5') {
				                    valid = true;
				                  }
				                }
				                valid ? resolve() : reject();
				            };
				            img.src = _URL.createObjectURL(file);
				        }).then(
				            () => {
				                return file;
				            },
				            () => {
				                this.$message.error('图片尺寸限制为700 x 280，大小不可超过10MB，比例为5:2');
				                return Promise.reject();
				            },
				        );
				        return isSize;
				    }
				}else if(this.size==1360){
		          this.loading = false;
		          const is1M = file.size / 1024 / 1024 < 10; // 限制小于10M
		            if (!is1M) {
		                this.$message.error('图片尺寸限制为1360 x 580，大小不可超过10MB');
		                return false;
		            } else {
		                const isSize = new Promise((resolve, reject) => {
		                    const width = 1360;
		                    const height = 580;
		                    const _URL = window.URL || window.webkitURL;
		                    const img = new Image();
		                    console.log(img)
		                    img.onload = () => {
		                        let valid = false;
		                        if(img.width>=width && img.height>=height){
		                          if ((img.width / img.height).toFixed(2) == '2.34') {
		                            valid = true;
		                          }
		                        }
		                        valid ? resolve() : reject();
		                    };
		                    img.src = _URL.createObjectURL(file);
		                }).then(
		                    () => {
		                        return file;
		                    },
		                    () => {
		                        this.$message.error('图片尺寸限制为1360 x 580，大小不可超过10MB');
		                        return Promise.reject();
		                    },
		                );
		                return isSize;
		            }
		        }else{
				    let allowTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif']
				    if (allowTypes.indexOf(file.type) == -1) {
				    	this.$message.error('只能上传 jpg、png 或 gif 的图片');
				    	return false
				    }
				    let promise = new Promise((resolve) => {
				    	this.$nextTick(function () {
				    		resolve(true)
				    	})
				    })
				    return promise
				}
			},
			uploadSuccess(res) {
				if(this.preview.length == this.limit){
					this.$message.warning(`当前限制选择 ${this.limit}个图片`);
					return;
				}
				this.loading = false;
				if (res.code == 200) {
          if(this.returnType == 'obj'){
            this.preview.push(res.data.fullFilename);
            this.previewObj.push(res.data);
            this.$emit('change', this.previewObj)
          }else{
            this.preview.push(res.data.fullFilename);
            this.$emit('change', this.preview)
          }

				} else {
					this.$message.error(res.msg);

				}
			},
			remove(index) {
         if(this.returnType == 'obj'){
            this.preview.splice(index, 1);
            this.previewObj.splice(index, 1);
            this.$emit('change', this.previewObj);
         }else{
           this.preview.splice(index, 1);
           this.$emit('change', this.preview);
         }

			},
			view(img) {
				 this.statusImg = img;
         this.$nextTick(()=>{
           this.$refs.preview.clickHandler();
         })
			}
		}
	}
</script>

<style scoped>
	.el-upload-list__item{
		width:100px;
		height:100px;
	}
	.el-upload-list.rectangle .el-upload-list__item{
		width:180px;
		height:100px;
	}
	.avatar-uploader.rectangle {
		width: 180px !important;
	}

	.avatar-uploader.rectangle .avatar {
		width: 100%;
	}

	.avatar-uploader .cameraIcon {
		height: 30px;
		line-height: 30px;
		margin-top: 20px;
		margin-bottom: 5px;
	}

	.avatar-uploader .text {
		margin: 0px;
		color: #8c939d;
	}

	.avatar-uploader>div /deep/ div.el-upload,
	.avatar-uploader>div {
		height: 100%;
		width: 100%;
	}

	.avatar-uploader {
		width: 100px;
		height: 100px;
		border: 1px dashed #bbb;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.icons {
		position: absolute;
		display: none;
		width: 100px;
		height: 100px;
		line-height: 100px;
		left: 0;
		top: 0;
		z-index: 1000;
		background: #000;
		opacity: 0.75;
		text-align: center;
	}

	.icons i {
		margin: 0 10px;
		font-size: 24px;
		color: #fff;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader:hover .icons {
		display: block;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 100px;
		height: 100px;
		line-height: 100px;
		text-align: center;
	}

	.avatar {
		width: 100px;
		height: 100px;
		display: block;
	}
</style>
